import React from "react"

import { Tabs, WhiteSpace, Badge } from 'antd-mobile';

import {get_shoucang_geshou,get_shoucang_zhuanji} from "../../../../api/index"

import myStyle from "../../style/My.module.css"
// const tabs = [
//   { title: <Badge text={'3'}>First Tab</Badge> },
//   { title: <Badge text={'今日(20)'}>Second Tab</Badge> },
//   { title: <Badge dot>Third Tab</Badge> },
//   { title: <Badge dot>four Tab</Badge> },
// ];

import {withRouter} from "react-router-dom"

const tabs = [
  { title: "专辑" },
  { title: "歌手" },
  { title: "视频" },
  { title: "专栏" },
  { title: "Mlog" },
];

class Shoucang_Tabs extends React.Component{
  constructor(){
    super()
    this.state = {
      Player:[],
      zhuanji:[],
      zhuanji_count:0
    }
  }

  componentDidMount(){
    let uid = localStorage.getItem("uId")

    get_shoucang_geshou()
    .then(body=>body.json())
    .then(res=>{
      console.log(res);
        this.setState({
          Player:res.data
      })
      console.log(this.state.Player);
    })

    get_shoucang_zhuanji()
    .then(body=>body.json())
    .then(res=>{
      console.log(res);
        this.setState({
          zhuanji:res.data,
          zhuanji_count:res.count
      })
      console.log(this.state.zhuanji);
    })
    
    // get_shoucang_geshou()
    // .then(body=>body.json())
    // .then(res=>{
    //   console.log(res);
    //     this.setState({
    //       Player:res.data
    //   })
    //   console.log(this.state.Player);
    // })

    // get_shoucang_zhuanji()
    // .then(body=>body.json())
    // .then(res=>{
    //   console.log(res);
    //     this.setState({
    //       zhuanji:res.data,
    //       zhuanji_count:res.count
    //   })
    //   console.log(this.state.zhuanji);
    // })
  }
  goToPlayer(id){
    console.log(id)
    this.props.history.push("/my/player?id="+id)
  }

  render(){
    return (
      <div>
      <Tabs tabs={tabs}
        initialPage={1}
        onChange={(tab, index) => { console.log('onChange', index, tab); }}
        onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
      >
        <div style={{ height: '500px', backgroundColor: '#fff'}}>
          {/* Content of first tab */}
          <h6 style={{display:"inline", paddingLeft:"20px"}}>{'收藏的专辑'+"("+this.state.zhuanji_count+")"}</h6>
          <ul className={myStyle.playerlist}>
            {this.state.zhuanji.map(item=>
                <li key={item.id} style={{display:'flex',marginBottom:'10px',height:"50px"}}>
                <img src={item.picUrl} alt="" style={{width:'50px',height:'50px'}}/>
                <div style={{display:'flex',flexDirection:'column'}}>
                  <span style={{marginBottom:"10px",marginTop:"5px"}}>{item.name}</span>
                  <span>{item.artists[0].name+" "+item.size+"首"}</span>
                </div>
              </li>)}

          </ul>

        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '500px', backgroundColor: '#fff' }}>
          {/* Content of second tab */}
          <ul className={myStyle.playerlist}>
            {this.state.Player.map(item=>
                <li key={item.id} style={{display:'flex',marginBottom:'10px',height:"50px"}}
                onClick={this.goToPlayer.bind(this,item.id)}
                >
                <img src={item.img1v1Url} alt="" style={{width:'50px',height:'50px'}}/>
                <div style={{display:'flex',flexDirection:'column'}}>
                  <span style={{marginBottom:"10px",marginTop:"5px"}}>{item.name}</span>
                  <span>{"专辑:"+item.albumSize+" "+"   MV:"+item.mvSize}</span>
                </div>
              </li>)}

          </ul>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '500px', backgroundColor: '#fff' }}>
          Content of third tab
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '500px', backgroundColor: '#fff' }}>
          Content of four tab
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '500px', backgroundColor: '#fff' }}>
          Content of five tab
        </div>
      </Tabs>
      <WhiteSpace />
      {/* <Tabs tabs={tabs2}
        initialPage={1}
        tabBarPosition="bottom"
        renderTab={tab => <span>{tab.title}</span>}
      >
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
          Content of first tab
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
          Content of second tab
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
          Content of third tab
        </div>
      </Tabs>
      <WhiteSpace /> */}
    </div>
    )
  }
}




export default withRouter(Shoucang_Tabs)